<template>
  <el-tabs v-model="tab">
    <el-tab-pane label="投诉信息" name="1">
      <keep-alive>
        <complaintDetail :complainId="id" :status="status"></complaintDetail>
      </keep-alive>
    </el-tab-pane>

    <el-tab-pane label="服务信息" name="2">
      <keep-alive>
        <ServiceInfo :orderDetail="orderDetail"></ServiceInfo>
      </keep-alive>
    </el-tab-pane>

    <el-tab-pane label="订单详情" name="3">
      <keep-alive>
        <order-info :orderDetail="orderDetail"></order-info>
      </keep-alive>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import complaintDetail from './complaintDetail'
import ServiceInfo from '@/views/fhb/myOrders/components/info/ServiceInfo'
import OrderInfo from '@/views/fhb/myOrders/components/info/OrderInfo'
export default {
  name: 'fhbComplaintShow',
  components: {
    complaintDetail,
    ServiceInfo,
    OrderInfo
  },
  data() {
    return {
      tab: String(this.$route.query.tab),
      orderId: this.$route.query.orderId,
      status: String(this.$route.query.status),
      id: this.$route.params.id,
      detail: {},
      orderDetail: {},
      loading: false
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      if (this.orderId) {
        this.loading = true
        this.$ajax.get('/ms-fahuobao-order/FhbOrder/findFhbOrderParticulars', {orderId: this.orderId}).then(response => {
          if (response.success) {
            this.orderDetail = response.data
          }
        }).finally(_ => {
          this.loading = false
        })
      }
    }
  }
}
</script>
